<!--
	省份综合易损性曲线
	Created by Penglei on 2023/08/10
-->
<template>
	<div id="fragilityChartsRef" ref="fragilityChartsRef" class="echats-box"></div>
</template>

<script setup name="FragilityCurve">
import { getCurrentInstance, defineProps, watch } from 'vue';
// 引入echats
import * as echarts from 'echarts';
// 引入接口
import { getDestructibilityByIdApi } from '@/api/vulnerability'
// 引入公用方法
import { ArrayObjUniq } from '@/utils/ruoyi.js'

// 调用父组件事件
const emit = defineEmits();
// 当前实例
const { proxy } = getCurrentInstance();
// 父组件传参
const props = defineProps({
	paramList2: {
		type: Array,
		requied: false,
	}
});

// 图表
let myChart = null;
// 渲染图表
const renderChart = (data) => {
	if (!myChart) {
		myChart = echarts.init(proxy.$refs.fragilityChartsRef);
	}
	const SD = data.filter(item=>item.breakState=='SD')
	const MD = data.filter(item=>item.breakState=='MD')
	const ED = data.filter(item=>item.breakState=='ED')
	const CD = data.filter(item=>item.breakState=='CD')
	// 数据处理
	let dataAxis = [];
	let dataSlight = [];
	let dataMedium = [];
	let dataSeverity = [];
	let dataCollapse = [];
	// 轻微
	if (SD && SD.length) {
		// 去重、排序、遍历
		ArrayObjUniq(SD, 'im')
			.map((item, index) => {
				if (item.im) {
					// x轴
					dataAxis.push(item.im);
					dataSlight.push([item.im, item.fim || 0]);
				}
			})
	}
	// 中等
	if (MD && MD.length) {
		// 去重、排序、遍历
		ArrayObjUniq(MD, 'im')
			.map((item, index) => {
				if (item.im) {
					dataMedium.push([item.im, item.fim || 0]);
				}
			})
	}
	// 严重
	if (ED && ED.length) {
		// 去重、排序、遍历
		ArrayObjUniq(ED, 'im')
			.map((item, index) => {
				if (item.im) {
					dataSeverity.push([item.im, item.fim || 0]);
				}
			})
	}
	// 倒塌
	if (CD && CD.length) {
		// 去重、排序、遍历
		ArrayObjUniq(CD, 'im')
			.map((item, index) => {
				if (item.im) {
					dataCollapse.push([item.im, item.fim || 0]);
				}
			})
	}
	// const dataSlight = [[0, 0], [0.2, 0.95], [0.4, 0.97], [0.6, 0.97], [0.8, 0.99], [1, 1]];
	// const dataMedium = [[0, 0], [0.2, 0.82], [0.4, 0.92], [0.6, 0.94], [0.8, 0.96], [1, 1]];
	// const dataSeverity = [[0, 0], [0.2, 0.2], [0.4, 0.82], [0.6, 0.9], [0.8, 0.96], [1, 1]];
	// const dataCollapse = [[0, 0], [0.2, 0.1], [0.4, 0.4], [0.6, 0.8], [0.8, 0.9], [1, 1]];

	// 配置项
	const option = {
		// 提示
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		// 图例
		legend: {
			right: 10,
			top: 70,
			align: 'left', //朝向
			orient: 'vertical', //垂直
			borderRadius: 0,
			itemWidth: 6,
			itemHeight: 6,
			itemGap: 10,
			textStyle: {
				fontSize: 14,
				color: '#FFFFFF',
			},
		},
		xAxis: {
			type: 'value',
			name: '(g)',
			nameLocation: 'end',
			nameTextStyle: {
				fontSize: 14,
				color: '#FFFFFF',
				align: 'center',
				verticalAlign: 'left',
				padding: [10, 0, 0, 32]
			},
			min: 0,
			// max: 1,
			// 线条和刻度
			axisLine: {
				show: true,
				color: '#999999',
				lineStyle: {
					width: 2,
				}
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				inside: false,
				fontSize: 14,
				margin: 11,
				color: '#FFFFFF',
				// align: 'right',
			},
			splitLine: {
				show: false,
			},
			// data: dataAxis,
		},
		yAxis: {
			type: 'value',
			name: '超越概率',
			nameLocation: 'center',
			nameTextStyle: {
				fontSize: 14,
				color: '#FFFFFF70',
				align: 'center',
				verticalAlign: 'left',
				padding: [-30, 0, 0, 0]
			},
			min: 0,
			// max: 1,
			// 线条和刻度
			axisLine: {
				show: false,
			},
			axisLabel: {
				inside: false,
				fontSize: 14,
				color: '#999999',
			},
			splitLine: {
				lineStyle: {
					type: 'dashed',
					color: '#475ADB80'
				}
			}
		},
		grid: {
			show: false,
			left: '15%',
			right: '15%',
			top: 30,
			bottom: 30,
		},
		color: ['#FF2525', '#A6D839', '#ED5385', '#46FFFF'],
		series: [
			{
				data: dataSlight,
				name: '轻微',
				type: 'line',
				// 平滑
				smooth: true,
				// 数据点大小
				symbolSize: 0,
			},
			{
				data: dataMedium,
				name: '中等',
				type: 'line',
				// 平滑
				smooth: true,
				// 数据点大小
				symbolSize: 0,
			},
			{
				data: dataSeverity,
				name: '严重',
				type: 'line',
				// 平滑
				smooth: true,
				// 数据点大小
				symbolSize: 0,
			},
			{
				data: dataCollapse,
				name: '倒塌',
				type: 'line',
				// 平滑
				smooth: true,
				// 数据点大小
				symbolSize: 0,
			},
		]
	};
	// 渲染
	option && myChart.setOption(option);
}

// 根据基础信息查出主键
const getData = () => {
	getDestructibilityByIdApi({
		id: props.paramId
	}).then(res => {
		const { code, data } = res;
		// 渲染图表
		renderChart(data);
	}).catch(err => {
		console.log(err.message);
	})
}
// 监听参数id改变
watch(() => props.paramList2, (val) => {
	renderChart(val);
	// 根据基础信息查出主键
	// getData();
}, {
	// 深层嵌套
	deep: true,
	// 初始触发
	// immediate: true
})
</script>

<style lang="scss" scoped>
.echats-box {
	width: 100%;
	height: 230px;
}
</style>